.box {
  display: flex;

  .box-left {
    margin-right: 15px;
    width: 180px;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-sizing: border-box;
    position: relative;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);

    .icon {
      position: absolute;
      right: -10px;
      top: 50%;
      transform: translate(0%, -50%);
      font-size: 12px;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid #f0f0f0;
      box-sizing: border-box;
      margin: -12px 0 0 -12px;
      background: #fff;
      box-shadow: 0 2px 3px #0000000a;
      transition: all .3s cubic-bezier(.4, 0, .2, 1);
      cursor: pointer;
      z-index: 5;
    }

    .left-item {
      margin-left: 15px;
      width: 150px;
      height: 36px;
      border-radius: 4px;
      line-height: 36px;
      text-align: center;
      font-size: 14px;
      margin-bottom: 10px;
      color: #828A9D;
      transition: .3s;
      cursor: pointer;

      &:first-child {
        margin-top: 15px;
      }

      &:hover {
        color: #1B2431;
        background: #f7f8fb;
      }
    }

    .active {
      background: #F0F3FF;
      color: #3B75FF;

      &:hover {
        color: #3B75FF;
        background: #F0F3FF;
      }
    }
  }

  .box-right {
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
  }
}